// tab栏切换
$('.hide').hide()
var iid = 1
$('.tab').each((index, item) => {
    item.addEventListener('click', () => {
        iid = index
        console.log(index);

        fuxian()
    })
})
function fuxian() {
    $('.hide').each((index1) => {
        // $(".hide").hide()
        $(".xiang").hide()
        $(".sss").show()
        $('.xiugai').hide()
        $(".ge").hide()
        $(".geren").show()
        $(".xiuge").hide()
        if (index1 == iid) {
            $(".hide").hide()
            $(".hide").eq(index1).show()
        }

    })

}
fuxian()
//退出登录
$('.tui').click(() => {
    location.assign("../登录.html/登录.html")
})
//渲染
var boy = $('.boy2')
function fu(cc) {
    boy.html('')
    cc.forEach(item => {
        if (item.sex == 1) {
            item.sex = '女'
        }
        else if (item.sex == 0) {
            item.sex = '男'
        } else {
            item.sex = '其他'
        }
        // console.log(item);
        boy.append(`
        <tr class="tr1">
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.nick}</td>
                    <td>${item.birthdata}</td>
                    <td>${item.sex}</td>
                    <td>${item.iphone}</td>
                    <td> 
                        <button class="color1" onclick="xiang(${item.id})">查看</button>
                        <button class="color1" onclick="xiu(${item.id})" class="tab">编辑</button>
                        <button class="color2" onclick="zhu(${item.id})">注销</button></td>
                </tr> `)
    });
}
//渲染

var ye
var page1 = 1
function xuan() {
    $.ajax({
        type: 'get',
        url: 'http://47.94.4.201/index.php/index/teacher/teacherlist',
        data: {
            page: page1,
            pagelimit: 10
        },
        dataType: 'json',
        success: (arr) => {

            var a = arr.data.data
            fu(a)
            $(".boy2 tr").even().css('background-color', 'rgb(249, 249, 249)')
            $(".boy2 tr").odd().css('background-color', 'white')

            ye = (arr.data.allpage)
            ye1()
            //页数
            // layui.use(function () {
            //     var laypage = layui.laypage;

            //     // 普通用法
            //     // laypage.render({
            //         //   elem: 'demo-laypage-normal-1',
            //         //   count: 50 // 数据总数
            //         // });
            //         laypage.render({
            //             elem: 'demo-laypage-normal-2',
            //             count: ye,// 数据总数,
            //             page:page1
            //         });
            //     });
        },
        error: (e) => {
            console.log(e);
        }
    })
}
xuan()
function ye1(){
    var spas = $('.pagination span')
    spas.html('')
    spas.append(`
        ${page1}/${ye}`)
}
// 上一页
$('.bott').click(() => {
    if( page1>1){
        page1--
        xuan()
    }
})
// 下一页
$('.bott1').click(() => {
    if( page1<ye){
        page1++
        xuan()  
        console.log(ye);
    }

    // console.log(page1);

})
//搜索
$('.sou').on('click', () => {
    console.log(5);
    var name = $('.suo').val()
    $.ajax({
        type: 'get',
        url: 'http://47.94.4.201/index.php/index/teacher/getsearch',
        data: {
            name: name
        },
        dataType: 'json',
        success: (arr) => {
            var a = arr.data.data
            console.log(a);
            fu(a)
            fetchData(1)
        },
        error: (e) => {
            console.log(e);
        }
    })
})
//注销
function zhu(id) {
    $.ajax({
        type: 'get',
        url: 'http://47.94.4.201/index.php/index/teacher/delteacher',
        data: {
            id: id
        },
        dataType: 'json',
        success: (arr) => {
            // var a = 
            console.log(arr);
            xuan()


        },
        error: (e) => {
            console.log(e);
        }
    })
}
//添加
// $('.tj').hide()
// $(".tj1").click(()=>{
// $('.tj').show()
// })
function tian() {
    var inp = $(".inps")
    console.log(inp.eq(1).val());
    console.log(inp.eq(2).val());
    console.log(inp.eq(3).val());
    console.log(inp.eq(4).val());
    console.log(inp.eq(5).val());
    iid = 1
    $.ajax({
        type: 'post',
        url: 'http://47.94.4.201/index.php/index/index/addteacher',
        data: {
            name: inp.eq(1).val(),
            nick: inp.eq(2).val(),
            sex: inp.eq(3).val(),
            birthdata: inp.eq(4).val(),
            iphone: inp.eq(5).val(),
        },
        dataType: 'json',
        success: (arr) => {
            var a = arr.msg
            if (a == "参数不能为空") {
                alert('参数不能为空')
            } else if (a == '添加成功') {
                xuan()
                fuxian()
                alert('添加成功')
            }
        },
        error: (e) => {
            console.log(e);
        }
    })
}
//详情
$(".xiang").hide()
function xiang(id) {
    $.ajax({
        type: 'get',
        url: 'http://47.94.4.201/index.php/index/index/getteacherbyid',
        data: {
            id: id
        },
        dataType: 'json',
        success: (a) => {
            var b = a.data
            if (b.sex == 1) {
                b.sex = '女'
            }
            else if (b.sex == 0) {
                b.sex = '男'
            }
            console.log(b);
            $('.boy9').html("")
            $('.boy9').append(`
                <tbody>
            <tr>
              <td>姓名：</td>
              <td>${b.name}</td>
              <td>职位：</td>
              <td>讲师</td>
              <td rowspan ="4"  class="tdimg"><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.wNf_FLR-sRVXhGZLAoOfRwAAAA?rs=1&pid=ImgDetMain" alt="" class="img1"></td>
            </tr>
            <tr>
              <td>昵称：</td>
              <td>${b.nick}</td>
              <td>出生日期：</td>
              <td>${b.birthdata}</td>
       
            </tr>
            <tr>
              <td>性别：</td>
              <td>${b.sex}</td>
              <td>入职日期</td>
              <td>2015-02-14</td>
            </tr>  
            <tr>
              <td>手机号码：</td>
              <td>${b.iphone}</td>
              <td>邮箱</td>
              <td>liqingzhao@itecast.cn</td>
            </tr>
             <tr>
              <td>籍贯</td>
              <td colspan="3">山东省 济南市 章丘市</td>
            </tr>
            <tr>
              <td colspan="5">
              <p>李清照（1084年3月13日—1155年），号易安居士，齐州章丘（今山东省济南市章丘区）人。宋代婉约派代表词人。
李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富。她小时候就在良好的家庭环境中打下文学基础，出嫁后与丈夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。绍兴二十五年（1155年）去世。
李清照所作词，前期多写悠闲生活，后期悲叹身世，情调感伤。艺术上，善用白描手法，自辟途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对以作诗文之法作词。能诗，留存不多，部分篇章感时咏史，情辞慷慨，与其词风不同。
作品有《李易安集》《易安居士文集》《易安词》，已散佚。后人辑有《漱玉集》《漱玉词》。今有《李清照集》辑本。</td>
            </tr>
          </tbody>`)
            $(".xiang").show()
        },
        error: (e) => {
            console.log(e);
        }
    })
}
//返回首页
$('.but11').click(() => {
    $(".xiang").hide()
})
//修改
$('.xiugai').hide()
var xiu_id
function xiu(id) {
    xiu_id = id
    $(".sss").hide()
    $('.xiugai').show()
    // console.log($('.jiang'));

}
$(".bian").on('click', () => {
    var inps = $('.xiugai input')
    $.ajax({
        type: 'post',
        url: 'http://47.94.4.201/index.php/index/index/upteacher',
        data: {
            id: xiu_id,
            name: inps.eq(0).val(),
            birthdata: inps.eq(1).val(),
            sex: inps.eq(0).val()

        },
        dataType: 'json',
        success: (a) => {
            console.log(a);
            $('.xiugai').hide()
            $(".sss").show()
            xuan()
        },
        error: (e) => {
            console.log(e);

        }
    })
})
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var myChart1 = echarts.init(document.getElementById('main1'));
//仪表盘
$.ajax({
    type: 'get',
    url: 'http://47.94.4.201/index.php/index/teacher/teacherlist',
    data: {},
    dataType: 'json',
    success: (a) => {
        var b = a.data.data
        var c = []
        var d = []
        var e = []
        var nan=0
        var nv=0
        console.log(b);
        
        b.forEach(item => {
            // console.log(item);
            if(item.sex==0){
                nan++
            }else if(item.sex==1){
                nv++
            }
            c.push(item.name)
            d.push(item.id)
            e.push(item.iphone)
            // console.log(c[0]);
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '教师性别对比'
                },
                tooltip: {},
                legend: {
                    data: ['对比']
                },
                xAxis: {
                    data: [ '总人数',`男`, `女`, ]
                },
                yAxis: {},
                series: [
                    {
                        name: '对比',
                        type: 'bar',
                        data: [`${b.length}`,`${nan}`, `${nv}`,]
                    }
                ]
            };
            option1 = {
                title: {
                    text: '教师名字以及编号前五个'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '昵称',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: `${d[0]}`, name: `${c[0]}` },
                            { value: `${d[1]}`, name: `${c[1]}` },
                            { value: `${d[2]}`, name: `${c[2]}` },
                            { value: `${d[3]}`, name: `${c[3]}` },
                            { value: `${d[4]}`, name: `${c[4]}` }
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            myChart1.setOption(option1);


        })
    },
    error: (e) => {
        console.log(e);

    }
})
//个人中心
function apply_1() {
    $(".ge").html('')
    var a = localStorage.getItem('add')
    var b = JSON.parse(a)
    //    console.log(b);
    b.forEach(item => {
        if (item.sex == 1) {
            item.sex = '女'
        } else if (item.sex == 0) {
            item.sex = '男'
        } else {
            item.sex = '其他'
        }
        // console.log(item);
        $(".ge").append(`
          <p>姓名：<span>${item.name}</span></p><br>
           <p>头像：<img src="${item.img}" alt="" class="img1"></p><br>
           <p>昵称： <span>${item.nick}</span></p><br>
           <p>性别：<span>${item.sex}</span></p><br>
           <p>出生日期：<span>${item.birthdata}</span></p><br>
           <p>籍贯： <select>
             <option >北京市</option>
           </select>&emsp;
           <select>
             <option >市辖区</option>
           </select>&emsp;
           <select>
             <option >东城区</option>
           </select></p><br>
           <p>手机号码 <span>${item.iphone}</span></p><br>
           <p>电子邮箱 <span>${item.emails}</span></p><br>
           <p>入职日期 <span>${item.indate}</span></p><br>
           <p>个人介绍:
           <textarea>你好我叫${item.name},我的手机号码是${item.iphone},我的邮箱是${item.emails}</textarea></p>`)
        //    ppp()
    })
}
apply_1()
function ppp(){
    var a = localStorage.getItem('add')
    var b = JSON.parse(a)
    $('#boy').html("")
    b.forEach(item=>{
        $("#boy").append(`
            <img src="${item.img}"alt=""><br> 
            <span>${item.name}</span>`)
    })
}
ppp()
$(".ge").hide()
$(".xiu1").click(() => {
    $(".geren").hide()
    $(".ge").show()
    $(".xiuge").hide()
    apply_1()
})

//修改个人中心
$(".xiuge").hide()
$(".xiu2").click(() => {
    $(".xiuge").show()
    $(".geren").hide()
    $(".ge").hide()
    console.log(5);
})

$('.xiuge1').click(() => {
    console.log(545);
    var a = $(".xiuge input")
    a.eq(0).val()
    var add = [{
        name: a.eq(0).val(),
        userid: 1,
        img: a.eq(1).val(),
        nick: a.eq(2).val(),
        sex: a.eq(3).val(),
        birthdata: a.eq(4).val(),
        iphone: a.eq(5).val(),
        emails: a.eq(6).val(),
        indate: a.eq(7).val(),
    }]

    $.ajax({
        type: 'post',
        url: "http://47.94.4.201/index.php/index/index/mycenter",
        data: {
            name: a.eq(0).val(),
            userid: 1,
            img: a.eq(1).val(),
            nick: a.eq(2).val(),
            sex: a.eq(3).val(),
            birthdata: a.eq(4).val(),
            iphone: a.eq(5).val(),
            emails: a.eq(6).val(),
            indate: a.eq(7).val(),
            // mydes:'dkjcndskoc',
        },
        dataType: 'json',
        success: (a) => {
            console.log(a);
            if (a.msg == '添加成功') {
                alert('修改成功')
                localStorage.setItem('add', JSON.stringify(add))
                $(".xiuge").hide()
                $(".geren").show()
                ppp()
            } else if (a.msg == '参数不能为空') {
                alert('参数不能为空')
            } else if (a.msg == '用户名重复') {
                alert('修改失败')
            }
        },
        error: (e) => {
            console.log(e);

        }
    })
})
$('.quxiao').click(() => {
    $(".xiuge").hide()
    $(".geren").show()
})


